import TextArea from "antd/es/input/TextArea"
import { FC, useState } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"
import { REG_NO_SPECIAL_CHAR } from "@/utils/validate"

export const LabelDecs: FC<any> = props => {
	const [text, setText] = useState("")
	const { labelProps, textareaProps, onChange } = props
	const { formatMessage } = useLocale()

	const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
		const newText = e.target.value.replace(REG_NO_SPECIAL_CHAR, "")
		setText(newText)
		onChange(newText)
	}

	return (
		<SFormItem
			name="labelDesc"
			label={formatMessage({ id: "member.label_desc" })}
			rules={[
				{
					required: true,
					message: formatMessage({ id: "member.label_desc_content" })
				},
				{
					min: 2,
					max: 500,
					message: formatMessage({ id: "common.validate.length_min_max" }, { min: 2, max: 500 })
				}
			]}
			{...labelProps}
		>
			<TextArea
				value={text}
				count={{
					show: true,
					max: 500
				}}
				placeholder={formatMessage({ id: "member.enter_min_submission" }, { min: 2 })}
				onChange={handleInputChange}
				{...textareaProps}
			/>
		</SFormItem>
	)
}
